﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="SampleTopicsFilter.aspx.cs" Inherits="OpenWaves.ActivityFeed.Web.Tests.Samples.SampleTopicsFilter" %>

<%@ Import Namespace="OpenWaves" %>
<%@ Register TagPrefix="af" Namespace="OpenWaves.ActivityFeed.Web.Controls" Assembly="OpenWaves.ActivityFeed.Web" %>
<%@ Register Src="~/Samples/SampleDescription.ascx" TagName="SampleDescription" TagPrefix="c" %>
<%@ Register TagPrefix="ow" Namespace="OpenWaves.Web.Controls" Assembly="OpenWaves.Web" %>


<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    
    <style type="text/css" media="all">
        
        #topicsFilterHeader {
            width: 492px;
            padding: 10px 0 10px 10px;
            margin: 5px 0 5px 0;
            vertical-align: top;
            position: relative;
        }
        
        #topicsFilterHeader {
            background: #87e0fd; /* Old browsers */
            /* IE9 SVG, needs conditional override of 'filter' to 'none' */
            background: url();
            background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* IE10+ */
            background: linear-gradient(to bottom, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-8 */
        }
        
        #topicsFilterHeader div {
            display: inline-block;
            vertical-align: top;
        }
        
        #topicsFilterHeader ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            width: 400px;
        }
        
        #topicsFilterHeader ul li {
            display: inline-block;
            font-style: italic;
            color: #888;
        }
        
    </style>
    
    <script type="text/javascript">

        $(document).ready(function () {
            $('#topicsFilterHeader').click(function () {
                if ($('#availableFilters').is(':visible')) {
                    $('#availableFilters').hide();
                    $('#topicsFilterHeader ul').show();
                }
                else {
                    $('#availableFilters').show();
                    $('#topicsFilterHeader ul').hide();
                }
            });
        });

    </script>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="cphBody" runat="server">

<c:SampleDescription ID="SampleDescription1" runat="server">
    <MessageTemplate>
        <p>This example shows how to filter updates by list of topics. Updates are filterd instantly, after checkbox is clicked.</p>
        <p>If you don't have many test updates use <a href="../UpdatesGenerator.aspx">Updates generator</a></p>
    </MessageTemplate>
</c:SampleDescription>


<h3>Topics filter</h3>


        <af:ActivityFeed ID="afMain" runat="server" FeedType="Global">
            <Template>
                <fieldset class="update" data-bind="jQuery: 'fakeInput', css: { disabled: !postUpdate.isInProgress() }">
                    <legend class="hidden-visualy">What are you doing?</legend>
                    <textarea cols="61" rows="2" data-bind="valueExt: newPostText, enable: !postUpdate.isInProgress(), valueUpdate: 'afterkeydown'"></textarea>
                    <button class="right" data-bind="command: postUpdate">Update</button>
                </fieldset>

                <div class="refresh-updates"><button data-bind="click: refreshUpdates">Refresh updates</button></div>

                <fieldset class="update search">
                  <label for="txtSearch">Search:</label>
                  <input id="txtSearch" type="text" class="watermark" data-bind="value: searchTerm, valueUpdate: 'afterkeydown'" title="Write a message..."></input>
                </fieldset>
                
                <div id="topicsFilterHeader">
                    <div>Topics filter</div>
                </div>
                <div id="availableFilters" style="display: none">
                    <ow:Repeater ID="Repeater1" runat="server" DataSource="<%# AvailableTopics %>">
                        <Template>
                            <div>
                                <ul>
                                    <ow:ItemsPlaceHolder ID="ItemsPlaceHolder1" runat="server"/>
                                </ul>
                            </div>                            
                        </Template>
                        <ItemTemplate>
                            <li>
                                <input type="checkbox" value='<%# Eval("Item2") %>' data-bind="checked: topicsFilter"/>
                                <span><%# Html.Encode(Eval("Item1").ToString()) %></span>
                            </li>                            
                        </ItemTemplate>
                    </ow:Repeater>
                </div>

                <af:UpdatesPlaceHolder cssclass="post-list" runat="server"/>

                <!-- ko if: hasMoreUpdates --><a href="javascript:void(0);" class="read-more" data-bind="command: loadNextPage">Read more...</a><!-- /ko -->
            </Template>            
        </af:ActivityFeed>
</asp:Content>